<template>
  <div id="UserDetailPage" class="user-detail-container">
    <h1 class="page-title">个人信息</h1>

    <!-- 个人信息表单区域 -->
    <div class="form-container">
      <!-- 变现提示信息 - 左侧 -->
      <div class="cash-tip cash-tip-left">
        <p>--联系客服，积分变现--</p>
        <img src="/wx_pic.jpg" alt="客服微信二维码" class="qr-code">
      </div>

      <!-- 个人信息表单 -->
      <a-form
        v-if="loginUser"
        name="userForm"
        layout="vertical"
        :model="userForm"
        @finish="handleSubmit"
        class="user-form"
      >
        <!-- 头像展示区域 -->
        <div class="avatar-preview">
          <img
            :src="userForm.userAvatar"
            alt="用户头像"
            v-if="userForm.userAvatar"
            class="avatar-image"
          />
          <span v-else class="avatar-placeholder">无头像</span>
        </div>

        <!-- 头像提示信息 -->
        <div class="avatar-tip" v-if="loginUser.userRole === 'user'">
          仅VIP用户可修改头像，<a href="/user_exchange_vip">成为VIP用户！</a>
        </div>

        <!-- VIP 提示信息 -->
        <div class="vip-tip" v-if="loginUser.userRole === 'admin' || loginUser.userRole === 'vip' || loginUser.userRole === 'svip'">
          您是尊敬的
          <span v-if="loginUser.userRole === 'vip'">VIP</span>
          <span v-if="loginUser.userRole === 'svip'">SVIP</span>
          <span v-if="loginUser.userRole === 'admin'">SVIP</span>
          用户，<br>截止时间：{{ dayjs(loginUser.vipExpireTime).format('YYYY-MM-DD HH:mm:ss') }}
        </div>

        <a-form-item name="userAvatar" label="头像地址" v-if="loginUser.userRole === 'admin' || loginUser.userRole === 'vip' || loginUser.userRole === 'svip'">
          <a-input
            v-model:value="userForm.userAvatar"
            placeholder="请输入头像 URL"
            allow-clear
          />
        </a-form-item>

        <a-form-item name="userAccount" label="账号">
          <a-input v-model:value="loginUser.userAccount" placeholder="账号" disabled />
        </a-form-item>

        <a-form-item name="credit" label="积分(可提现)">
          <a-input v-model:value="loginUser.credit" placeholder="账号" disabled />
        </a-form-item>

        <a-form-item name="userName" label="昵称">
          <a-input v-model:value="userForm.userName" placeholder="昵称" allow-clear />
        </a-form-item>

        <a-form-item name="userProfile" label="个人简介">
          <a-textarea
            v-model:value="userForm.userProfile"
            placeholder="请输入个人简介"
            :auto-size="{ minRows: 2, maxRows: 5 }"
            allow-clear
          />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" style="width: 100%">
            修改
          </a-button>
        </a-form-item>
      </a-form>

      <!-- 变现提示信息 - 右侧 -->
      <div class="cash-tip cash-tip-right">
        <p>--联系客服，积分变现--</p>
        <img src="/wx_pic.jpg" alt="客服微信二维码" class="qr-code">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { updateMyUserUsingPost } from '@/api/userController.ts'
import dayjs from 'dayjs'

// 全局变量-当前登录用户
const loginUser = useLoginUserStore().loginUser

// 定义 图片信息表单
const userForm = reactive<API.UserUpdateMyRequest>({})

// 获取路由实例
const router = useRouter()

/**
 * 提交表单
 * @param values
 */
const handleSubmit = async (values: any) => {
  const userId = loginUser.id
  if (!userId) {
    return
  }
  const res = await updateMyUserUsingPost({
    id: userId,
    ...values,
  })
  // 操作成功
  if (res.data.code === 0 && res.data.data) {
    message.success('修改信息成功')
    // 跳转到图片详情页
    router.push({
      path: `/my_detail`,
    })
  } else {
    message.error('修改信息失败，' + res.data.message)
  }
}

onMounted(() => {
  userForm.userName = loginUser.userName
  userForm.userProfile = loginUser.userProfile
  userForm.userAvatar = loginUser.userAvatar
})
</script>

<style scoped>
.user-detail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.page-title {
  margin-bottom: 16px;
  text-align: center;
  width: 100%;
}

/* 表单容器 */
.form-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 900px;
  width: 100%;
  gap: 40px;
}

/* 表单样式 */
.user-form {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 头像预览 */
.avatar-preview {
  text-align: center;
  margin-bottom: 16px;
}

.avatar-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ddd;
}

.avatar-placeholder {
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid #ddd;
  background-color: #f5f5f5;
  color: #999;
  font-size: 14px;
}

.avatar-tip {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 16px;
}

.avatar-tip a {
  color: #1890ff;
  text-decoration: none;
}

.avatar-tip a:hover {
  text-decoration: underline;
}

.vip-tip {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(to right, #87CEEB, #FFB6C1);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(255, 182, 193, 0.6);
}

/* 变现提示 */
.cash-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.cash-tip-left {
  margin-right: auto;
}

.cash-tip-right {
  margin-left: auto;
}

.qr-code {
  width: 200px;
  height: 200px;
  margin-top: 10px;
}
</style>
